import {observable, runInAction, toJS} from "mobx";
import dvTool from "@/pages/dv/dvTool";
import {isPlainObject} from 'lodash';
import {storage} from "@/utils";

const dvEditor = observable({
  dvLoading: true,
  // 初始配置项
  initOption: {
    name: 'test',
    id: 1,
    uuid: 'dv-uuid-1013e-2fa17wqx',
    width: 1920,
    height: 1080,
    adapterMode: 'height',
    remark: '121212',
    token: 'FDSFSDFSDFSDF',
    orderIndex: 1,
    coverImg: '', // 封面
    isDev: true,
    snapshootUrls: [],
    group: {},
    cssConfig: {
      syntax: 'CSS', // SCSS | CSS
      theme: 'normal',
      code: ''
    },
    bgConfig: {
      bgUrl: '/assets/dv/bg.png',
      bgColor: 'rgb(3, 12, 59)',
      bgOpacity: 1,
      bgBlur: 0
    },
    charts: [
      {
        name: 'iframe',
        uid: 'FIRST_COMPONENT1',
        left: 100,
        top: 40,
        width: 200,
        height: 100,
        zIndex: 1,
        type: 'html_iframe',
        frameType: 'html',
        overflowHidden: true,
        rotate: 0,
        opacity: 1,
        mask: true, // 遮罩层
        config: {
          disabledCustomConfig: true,
          option: {
            src: 'https://echarts.apache.org/'
          }
        },
        codeConfig: {
          theme: '',
          code: ''
        },
        "dataConfig": {
          "dataType": "static",
          "dataModelHash": "",
          "dataApiUrl": "",
          "continuity_type": "simple",
          "continuity_time_step": "",
          "continuity_empty_val": "0",
          "data": "https://www.lodashjs.com/",
          "needAutoRefresh": true,
          "autoRefreshInterval": 1800
        },
        events: {}
      },
      {
        name: '第2个组件',
        uid: 'FIRST_COMPONENT2',
        left: 500,
        top: 100,
        width: 400,
        height: 300,
        zIndex: 1,
        type: 'echarts_init',
        frameType: 'echarts',
        overflowHidden: true,
        rotate: 0,
        opacity: 1,
        mask: false, // 遮罩层
        config: {
          isHidden: false,
          option: {
            title: {
              text: '空白模板'
            },
          }
        },
        codeConfig: {
          code: ''
        },
        "dataConfig": {
          "dataType": "static",
          "dataModelHash": "",
          "dataApiUrl": "",
          "continuity_type": "simple",
          "continuity_time_step": "1Hour",
          "continuity_empty_val": "0",
          "data": "",
          "needAutoRefresh": true,
          "autoRefreshInterval": 1800
        },
        events: {}
      },
      {
        name: 'echarts折线图',
        uid: 'FIRST_COMPONENT3',
        left: 500,
        top: 700,
        width: 400,
        height: 300,
        zIndex: 1,
        type: 'echarts_line',
        frameType: 'echarts',
        overflowHidden: true,
        rotate: 0,
        mask: false, // 遮罩层
        opacity: 1,
        config: {
          isHidden: false,
          option: {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
            }]
          }
        },
        codeConfig: {
          code: ''
        },
        "dataConfig": {
          "dataType": "static",
          "dataModelHash": "",
          "dataApiUrl": "",
          "continuity_type": "simple",
          "continuity_time_step": "1Hour",
          "continuity_empty_val": "0",
          "data": "",
          "needAutoRefresh": true,
          "autoRefreshInterval": 1800
        },
        events: {}
      }
    ],
    functions: {}
  },
  // 编辑状态下的大屏配置项 --拆分
  // dvOption: {
  //    chartPanels: [], // 图表组件
  //    bgConfig: {}, // 背景配置
  //    functions: {}, // 编程-函数方法
  // },
  dvOption: {}, // 基础配置
  charts: [], // 图表组件
  bgConfig: {}, // 背景配置
  cssConfig: {}, // css配置
  functions: {}, // 编程-函数方法

  getDvOption(){
    this.dvLoading = true;
    setTimeout(() => {
      runInAction(() => {
        const data = this.getCacheDvOption(false)
        // const {charts, bgConfig, functions,  ...dvOption} = toJS(this.initOption);
        const {charts, bgConfig, functions, cssConfig,  ...dvOption} = data;

        this.dvOption = dvOption;
        this.charts = charts;
        this.bgConfig = bgConfig;
        this.cssConfig = cssConfig;
        this.functions = functions;
        this.dvLoading = false;
        this.updateDvState(dvOption, charts, bgConfig, cssConfig);
      })
    }, 500);

  },

  updateDvState(dvOption: DV.IOption, charts: DV.IChart[], bgConfig: DV.IBgConfig, cssConfig: DV.ICssConfig){
    try{
      if(Array.isArray(charts)){
        charts.forEach((chart:DV.IChart) => {
          dvTool.updateChart(chart.uid || '', chart); // 新增图表
        })
      }

      if(isPlainObject(dvOption)){
        dvTool.updateDvOption(dvOption);
      }

      if(isPlainObject(bgConfig)){
        dvTool.updateBgConfig(bgConfig);
      }

      if(isPlainObject(cssConfig)){
        dvTool.updateCssConfig(cssConfig);
      }
    }catch (e) {

    }
  },

  saveCacheDvOption(){
    // 拼凑完整配置
    const dvOption = {
      ...dvTool.dvOption,
      bgConfig: dvTool.bgConfig,
      charts: Object.values(dvTool.charts)
    }
    storage.setStorage('dvOption', dvOption)
  },

  getCacheDvOption(local: boolean = false){
    if(local){
      return storage.getStorage('dvOption');
    }

    return toJS(this.initOption)
  }


});

export default dvEditor;
